var global = 
{
	headerH: "30px",
	bodyH: "550px",
	footerH: "30px",

	toolboxW: "250px",
	editorW: "250px",

	counterManager : {},
	controlManager : {},
	selectedControl : null,

	toolboxId : "toolbox",
	workspaceId : "workspace",
	editorId : "editor"
};

function loadPage()
{
	initalize();
	loadPanels();
	loadToolbox();
	loadEditor();
}

function initalize()
{
	// allow drop on workpace
	var workpace = document.getElementById(global.workspaceId);
	var dropHandler = new IDropable();

	workspace.addEventListener("dragenter", dropHandler.dragEnter, false);
	workspace.addEventListener("dragover", dropHandler.dragOver, false);
	workspace.addEventListener("dragleave", dropHandler.dragLeave, false);
	workspace.addEventListener("drop", dropHandler.drop, false);
}

function loadPanels() 
{
	// three main panel: header, body, footer
	$("#p-Page").kendoSplitter(
	{
		orientation: "vertical",
		panes: 
		[
			{ collapsible: false, resizable: false, size: global.headerH },
			{ collapsible: false, resizable: false, size: global.bodyH },
			{ collapsible: false, resizable: false, size: global.footerH },
			{ collapsible: false, resizable: false, size: "0px" }
		]
	});

	// in body: toolbox, workspace, propeditor
	$("#p-Body").kendoSplitter(
	{
		panes: 
		[
			{ collapsible: true, size: global.toolboxW },
			{ collapsible: false },
			{ collapsible: true, size: global.editorW }
		]
	});
}

function loadToolbox(path)
{
	// dummy contacts data
	var controls = 
	[
		{
			group: "Common Controls",
			items:
			[
				{ID: "uipanel", Contructor: "UIPanel", Name: "Panel", JSPath: "UIPanel.js", IconPath: "icons/UIPanel.png"},
				{ID: "uilabel", Contructor: "UILabel", Name: "Label", JSPath: "UILabel.js", IconPath: "icons/UILabel.png"},
				{ID: "uiimage", Contructor: "UIImage", Name: "Image", JSPath: "UIImage.js", IconPath: "icons/UIImage.png"},
				{ID: "uivideo", Contructor: "UIVideo", Name: "Video", JSPath: "UIVideo.js", IconPath: "icons/UIVideo.png"}
			]
		},

		{
			group: "Facebook",
			items:
			[
				{ID: "uifbpost", Contructor: "UIFacebookPost", Name: "FB Post", JSPath: "UIFacebookPost.js", IconPath: "icons/UIFacebookPost.png"},
				{ID: "uifbcmt", Contructor: "UIFacebookComment", Name: "FB Comment", JSPath: "UIFacebookComment.js", IconPath: "icons/UIFacebookComment.png"},
				{ID: "uifbheader", Contructor: "UIFacebookHeader", Name: "FB Header", JSPath: "UIFacebookHeader.js", IconPath: "icons/UIFacebookHeader.png"},
				{ID: "uifbwheader", Contructor: "UIFacebookWallHeader", Name: "FB Wall Header", JSPath: "UIFacebookWallHeader.js", IconPath: "icons/UIFacebookWallHeader.png"}
			]
		},

		{
			group: "Flickr",
			items:
			[
				{ID: "uiflickrheader", Contructor: "UIFlickrHeader", Name: "Flickr Header", JSPath: "UIFlickrHeader.js", IconPath: "icons/UIFlickrHeader.png"},
				{ID: "uiflickrcontent", Contructor: "UIFlickrContent", Name: "Flickr Content", JSPath: "UIFlickrContent.js", IconPath: "icons/UIFlickrContent.png"},
				{ID: "uiflickrads", Contructor: "UIFlickrAds", Name: "Flickr Ads", JSPath: "UIFlickrAds.js", IconPath: "icons/UIFlickrAds.png"},
				{ID: "uiflickrfooter", Contructor: "UIFlickrFooter", Name: "Flickr Footer", JSPath: "UIFlickrFooter.js", IconPath: "icons/UIFlickrFooter.png"}
			]
		}
	];

	// create dataSource
	var dataSource = [];
	var groupNo = controls.length;

	for(var i = 0; i < groupNo; i++)
	{
		// get group name
		var groupName = controls[i].group;
		var groupItems = controls[i].items;

		// get group items
		var groupControls = [];
		for(var j = 0; j < groupItems.length; j++)
		{
			// create control element
			var html = "";
			html += "<div id=" + groupItems[j].ID + " class='idfield'>" + groupItems[j].Contructor + "</div>";
			html += groupItems[j].Name;

			// add js file
			//include(groupItems[j].JSPath);

			// add to source
			groupControls.push({text: html, encoded: false, imageUrl: groupItems[j].IconPath});
		}

		// push group into datasource
		dataSource.push({text: groupName, encoded: false, items: groupControls});
	}

	// bind data to the div
	var onSelect = function(e)
	{
		// get id and contructor
		var id = $(e.item).find("> .k-link > div").attr('id');
		var contructor = $(e.item).find("> .k-link > div").text();

		if(typeof id == "undefined") return;

		// increase counter
		if(typeof global.counterManager[id] == "undefined")
			global.counterManager[id] = 0;
		else
			global.counterManager[id]++;

		// create control
		var obj = AnyObjContructor(contructor);
		obj.Construct(id + global.counterManager[id], new Coord());
		var ele = obj.GetElement();

		// add onclick event to item
		ele.onclick = function()
		{
			global.selectedControl = obj;
			ListEditor.Show(global.editorId, obj.GetPropertyList());
		}

		// append
		global.controlManager[ele.id] = obj;
		document.getElementById(global.workspaceId).appendChild(ele);
	};

	$("#" + global.toolboxId).kendoPanelBar({dataSource: dataSource, select: onSelect});
}

function loadEditor()
{
	ListEditor.Show(global.editorId, []);
}